<template>
	<el-row>
		支持所有Iconify sets：
		<el-link href="https://icon-sets.iconify.design/">Iconify</el-link>
	</el-row>
	<div>直接使用icon="{collection}:{name}"的方式进行使用</div>
	<span> icon: <iconify :icon="iconRef" :style="style"></iconify> </span>
	<p></p>
	<icon-picker @submit="handleSubmit"></icon-picker>
</template>

<script setup lang="ts">
import type { IconPickerSubmitDataProps } from '@/components/IconPicker/types'
import type { CSSProperties } from 'vue'

definePage({
	meta: {
		title: 'pages.pick-icon',
		icon: 'healthicons:i-exam-multiple-choice'
	}
})

const iconRef = ref('ep:baseball')
const style = ref<CSSProperties>({})

const handleSubmit = (data: IconPickerSubmitDataProps) => {
	const { icon, fontSize, color } = data
	iconRef.value = icon
	style.value = {
		fontSize: `${fontSize}px`,
		color
	}
}
</script>

<style scoped></style>
